<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>电影票抢购系统</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"/>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <script src="http://cdn.bootcss.com/vue/2.1.4/vue.min.js"></script>

    <script src="http://cdn.bootcss.com/lodash.js/4.17.2/lodash.min.js"></script>

    <script type="text/javascript"  th:src="@{/js/detail.js}"></script>

    <link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<div class="container">
    <div class="panel">
        <div class="panel-heading" style="position: relative">
            <h1>电影票抢购列表</h1>
            <div class="userpanel">
                <label>用户:<span id="user"></span></label>
                <button id="logout" class="btn btn-danger">退出</button>
            </div>
        </div>
        <div class="panel-body">
            <table class="table">
                <thead>
                <tr>
                    <th>电影名称</th>
                    <th>剩余数量</th>
                    <!--<th>添加时间</th>-->
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>活动详情</th>
                </tr>
                </thead>
                <tbody id="movieTable">

<!--                <tr th:each="ticke:${movieTickes}" class="movieItem">
                    <th th:text="${ticke.name}"></th>
                    <th th:text="${ticke.num}"></th>
                    &lt;!&ndash;<th th:text="${#dates.format(ticke.addTime, 'yyyy-MM-dd HH:mm:ss')}"></th>&ndash;&gt;
                    <th th:text="${ticke.startTime}" class="start"></th>
                    <th th:text="${ticke.endTime}" class="end"></th>
                    <th><a th:href="'/movie/'+${ticke.id}" class="btn status"></a></th>
                </tr>-->
                <tr v-for="item in sortmovies" class="movieItem">
                    <th v-text="item.name"></th>
                    <th v-text="item.num"></th>
                    <th v-text="item.startTime" class="start"></th>
                    <th v-text="item.endTime" class="end"></th>
                    <th><a v-bind:href="item.url" class="btn" v-bind:class="item.style" v-text="item.text"></a></th>
                </tr>
                <!--<tr>-->
                <!--<th>1</th>-->
                <!--<th>2</th>-->
                <!--<th>3</th>-->
                <!--<th>4</th>-->
                <!--<th>5</th>-->
                <!--<th><a href="#" class="btn btn-info">点击查看</a></th>-->
                <!--</tr>-->

                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- 弹出层 -->
<div class="modal fade" id="userInfo">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">请登录</h3>
            </div>
            <div class="modal-body">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="email">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="Enter email"/>
                    </div>
                    <a id="submit" class="btn btn-primary">登录</a>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $("#logout").hide();
        $.ajax({
            url: '/checkLogin',
            type: 'get',
            dataType: "json",
            success: function (result) {
                if(result.status){
                    $("#user").html(result.data);
                    $("#logout").show();
                }
                else{
                    var userinfo = $("#userInfo");
                    userinfo.modal({
                        show: true,
                        backdrop: 'static',
                        keyboard: false
                    });
                }
            },
            error: function () {
                console.error("checkLogin error!");
            }
        });
        $.ajax({
            url:"/list",
            success:function (data) {
                console.log(data);
                var a = [];
                for(var i in data){
                    var url = "/movie/"+data[i].id;
                    var start = Math.round(data[i].startTime);
                    var end = Math.round(data[i].endTime);
                    var now= Math.round(new Date().getTime());
                    if(start>now){
                        var text = "未开始";
                        var status = -1;
                        var style = "btn-info";
                    }
                    else if(now>end){
                        var text = "已结束";
                        var status = 1
                        var style = "btn-danger";
                    }
                    else{
                        var text = "正在抢购";
                        var status = 0
                        var style = "btn-success";
                    }
                    var movie = {
                        url:url,
                        num:data[i].num,
                        startTime:new Date(start).Format("yyyy/MM/dd hh:mm:ss"),
                        endTime:new Date(end).Format("yyyy/MM/dd hh:mm:ss"),
                        name:data[i].name,
                        status:status,
                        style:style,
                        text:text
                    };
                    a.push(movie);
                    console.log(movie);
                }
                console.log(a);
                var vm = new Vue({
                    el:"#movieTable",
                    data:{
                        movies:a
                    },
                    computed:{
                        sortmovies:function () {
                            return _.orderBy(this.movies, 'status')
                        }
                    }
                })
            }
        });

        $("#submit").click(function () {
            var emailRE = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
            var email = $("#email").val();
            if(emailRE.test(email)){
                $.ajax({
                    url: '/login',
                    data: {email: email},
                    type: 'post',
                    dataType: "json",
                    success: function () {
                        $("#user").html(email);
                        var userinfo = $("#userInfo");
                        userinfo.modal('hide');
                        $("#logout").show();
                    },
                    error: function () {
                        console.error("login error!");
                    }
                });
            }else{
                alert("请输入正确邮箱格式！")
            }
        });
        $("#logout").click(function () {
            window.location.href = "/logout";
        })
    });
</script>
</body>
</html>
